import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {
    WeaTable,
    WeaFormItem,
    WeaInput,
    WeaSelect,
    WeaCheckbox,
    WeaInputNumber,
    WeaLocaleProvider,
    WeaUpload,
    WeaButtonIcon,
    WeaTableEditable,
    WeaRightMenu,
    WeaBrowser
} from "ecCom";
import {Button, Modal, Row, Col} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import CommonConfig from '../../constant/CommonConfig.js';
import LanguageConstant from '../../constant/LanguageConstant.js';

import '../../style/importMouldComponent.less';

const {getLabel} = WeaLocaleProvider;

@inject("importMouldStore")
@observer
class ImportMouldComponent extends Component {

    componentDidMount() {
        const {importMouldStore, defaultType, selectedSubCompanyId} = this.props;
        importMouldStore.resetImportMouldComponent();
        importMouldStore.init({defaultType, selectedSubCompanyId});
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {importMouldStore, key} = this.props;
        const {defaultType, selectedSubCompanyId} = nextProps;
        if (key != nextProps.key) {
            importMouldStore.resetImportMouldComponent();
            importMouldStore.init({defaultType, selectedSubCompanyId});
        }
    }


    render() {
        const {importMouldStore} = this.props;
        const {
            authorized, onFileUploadChange, importedMouldFilesTable, onUploading, maxMouldFileUploadSize,
            detachedMaintenance, subCompanyEditable, subcompany, onSubcompanyChange
        } = importMouldStore;
        if (!authorized) {
            return (<NoRightComponent/>);
        }
        const subcompanyReplaceDatas = [];
        if (subcompany) {
            subcompanyReplaceDatas.push(subcompany);
        }
        return (
            <div className="import-mould-component">
                <Fragment>
                    <div className="import-mould-component-fileupload">
                        <WeaFormItem
                            label={getLabel(518598, "上传模板")}
                            labelCol={{span: 6}}
                            wrapperCol={{span: 18}}
                        >
                            <WeaUpload
                                uploadUrl="/api/doc/upload/uploadFile"
                                category="string"
                                maxUploadSize={maxMouldFileUploadSize}
                                viewAttr={2}
                                showOrder={false}
                                limitType={CommonConfig.limitUploadMouldFileTypes}
                                listType='img'
                                editable={false}
                                showUploader={true}
                                showUploadTime={false}
                                showClearAll={false}
                                isDetail={false}
                                autoUpload={true}
                                replaceWhenOver={false}
                                sortable={false}
                                oneline
                                onChange={(ids, list) => onFileUploadChange(ids, list)}
                                onUploading={status => onUploading(status)}
                            />
                        </WeaFormItem>
                        {
                            detachedMaintenance && <WeaFormItem
                                label={getLabel(526967, "所属机构")}
                                labelCol={{span: 6}}
                                wrapperCol={{span: 18}}
                            >
                                <WeaBrowser
                                    type={164}
                                    title={getLabel(526967, "所属机构")}
                                    fieldName="subcompanyId"
                                    inputStyle={{width: 200}}
                                    viewAttr={subCompanyEditable ? "2" : "1"}
                                    replaceDatas={subcompanyReplaceDatas}
                                    onChange={(ids, names, datas) => {
                                        onSubcompanyChange(ids, names, datas)
                                    }}
                                />
                            </WeaFormItem>
                        }
                    </div>
                    <div className="import-mould-component-filestable">
                        {this.renderImportedTable()}
                    </div>
                </Fragment>
            </div>
        );
    }


    /**
     * 渲染上传的模板文件列表
     *
     * @param columns
     * @param data
     */
    renderImportedTable() {
        const {importMouldStore} = this.props;
        const {importedMouldFiles, deleteButtonDisabled, typeOptions, affirmDelete, onRowSelect, onChangeField} = importMouldStore;
        const columns = [{
            title: getLabel("519086", "模板文件"),
            dataIndex: "fileId",
            width: "25%",
            com: [
                {
                    type: "CUSTOM",
                    key: "fileId",
                    render: (text, record, index, onEdit) => {
                        const {fileId, attachName} = record;
                        const link = `/spa/document/index2file.jsp?imagefileId=${fileId}`;
                        return (
                            <a href={link} target="_blank">{attachName}</a>
                        )
                    }
                },
            ]
        }, {
            title: getLabel("518469", "名称"),
            dataIndex: "name",
            width: "20%",
            com: [
                {
                    type: "CUSTOM",
                    key: "name",
                    render: (text, record, index, onEdit) => (
                        <WeaInput
                            style={{width: "100%"}}
                            value={record.name}
                            viewAttr={3}
                            onChange={value => {
                                onChangeField(record.fileId, "name", value, record);
                            }}
                        />
                    )
                },
            ]
        }, {
            title: getLabel("433", "描述"),
            dataIndex: "desc",
            width: "20%",
            com: [
                {
                    type: "CUSTOM",
                    key: "desc",
                    render: (text, record, index, onEdit) => (
                        <WeaInput
                            style={{width: "100%"}}
                            viewAttr={2}
                            onChange={value => {
                                onChangeField(record.fileId, "desc", value, record);
                            }}
                        />
                    )
                },
            ]
        }, {
            title: getLabel("518481", "模板类型"),
            dataIndex: "type",
            width: "15%",
            com: [
                {
                    type: "CUSTOM",
                    key: "type",
                    render: (text, record, index, onEdit) => {
                        let {type} = record;
                        if (type != undefined) {
                            type = "" + type;
                        }
                        return (
                            <WeaSelect
                                style={{width: "95%"}}
                                options={typeOptions}
                                viewAttr={3}
                                value={type}
                                onChange={(value, showname) => {
                                    onChangeField(record.fileId, "type", value, record)
                                }}
                            />
                        )
                    }
                }
            ]
        }, {
            title: getLabel(LanguageConstant.DISPLAYORDER, "显示顺序"),
            dataIndex: "displayOrder",
            width: "15%",
            com: [
                {
                    type: "CUSTOM",
                    key: "displayOrder",
                    render: (text, record, index, onEdit) => {
                        let {displayOrder} = record;
                        if (displayOrder == undefined) {
                            displayOrder = 0;
                        }
                        return (
                            <WeaInputNumber
                                hasInput
                                viewAttr="2"
                                value={displayOrder}
                                onChange={(value) => {
                                    onChangeField(record.fileId, "displayOrder", value, record)
                                }}
                            />
                        )
                    }
                }
            ]
        }];
        return (
            <WeaTableEditable
                rowKey="fileId"
                initialDatas={toJS(importedMouldFiles)}
                datas={toJS(importedMouldFiles)}
                columns={columns}
                getRowSelection={this.getRowSelection}
                showAdd={false}
                showCopy={false}
                showRowSelect={true}
                willDelete={affirmDelete}
                onRowSelect={onRowSelect}
            />
        );
    }


    getRowSelection = rowSelection => {
        const {importMouldStore} = this.props;
        const {deletedImportedFileIds} = importMouldStore;
        const _deletedImportedFileIds = toJS(deletedImportedFileIds);
        const {selectedRowKeys} = rowSelection;
        _.remove(selectedRowKeys, (e) => {
            return _deletedImportedFileIds.indexOf(e) != -1;
        });
        const sel = {...rowSelection};
        return sel;
    }

}

export default ImportMouldComponent;